<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>TypeScript笔记 | 黑不溜球de博客么么哒</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="TypeScript安装，编译npm install -g typescript 编译：tsp 文件名 —-&gt;编译成js文件 基本语法 基本数据类型 1234567891011121314151617181920212223&#x2F;&#x2F;对于基本的变量let a:number &#x3D; 1;let b:boolean &#x3D; false;let c:string &#x3D; &amp;#x27;ada&amp;#x27;;let d:">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript笔记">
<meta property="og:url" content="http://example.com/2020/10/26/typeScript/index.html">
<meta property="og:site_name" content="黑不溜球de博客么么哒">
<meta property="og:description" content="TypeScript安装，编译npm install -g typescript 编译：tsp 文件名 —-&gt;编译成js文件 基本语法 基本数据类型 1234567891011121314151617181920212223&#x2F;&#x2F;对于基本的变量let a:number &#x3D; 1;let b:boolean &#x3D; false;let c:string &#x3D; &amp;#x27;ada&amp;#x27;;let d:">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-10-26T07:23:46.366Z">
<meta property="article:modified_time" content="2020-10-27T03:42:42.820Z">
<meta property="article:author" content="Jone-xin">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/my_blog/atom.xml" title="黑不溜球de博客么么哒" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/my_blog/css/style.css">

<meta name="generator" content="Hexo 5.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/my_blog/" id="logo">黑不溜球de博客么么哒</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/my_blog/">主页</a>
        
          <a class="main-nav-link" href="/my_blog/archives">归档</a>
        
          <a class="main-nav-link" target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling">@我的gitee</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/my_blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-typeScript" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/10/26/typeScript/" class="article-date">
  <time datetime="2020-10-26T07:23:46.366Z" itemprop="datePublished">2020-10-26</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      TypeScript笔记
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h3><h4 id="安装，编译"><a href="#安装，编译" class="headerlink" title="安装，编译"></a>安装，编译</h4><p><code>npm install -g typescript</code></p>
<p>编译：tsp 文件名 —-&gt;编译成js文件</p>
<h4 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h4><ul>
<li><p>基本数据类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//对于基本的变量</span></span><br><span class="line"><span class="keyword">let</span> a:<span class="built_in">number</span> = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> b:<span class="built_in">boolean</span> = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">let</span> c:<span class="built_in">string</span> = <span class="string">&#x27;ada&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> d:<span class="built_in">any</span> = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">let</span> e:<span class="literal">null</span> </span><br><span class="line"><span class="keyword">let</span> f:<span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> g:<span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//类型组合</span></span><br><span class="line"><span class="keyword">let</span> str:<span class="built_in">number</span>|<span class="built_in">string</span>|<span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line">str = <span class="string">&#x27;asd&#x27;</span> </span><br><span class="line"></span><br><span class="line"><span class="comment">//对数组</span></span><br><span class="line"><span class="keyword">let</span> h:[<span class="built_in">string</span>,<span class="built_in">boolean</span>,<span class="built_in">any</span>] <span class="comment">//元组</span></span><br><span class="line"><span class="comment">//普通数组</span></span><br><span class="line"><span class="keyword">let</span> i:<span class="built_in">number</span>[]</span><br><span class="line"><span class="keyword">let</span> j:<span class="built_in">Array</span>&lt;<span class="built_in">number</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//枚举类型</span></span><br><span class="line"><span class="built_in">enum</span> flag &#123;sucess=<span class="number">1</span>,falile=<span class="number">2</span>&#125;</span><br><span class="line"><span class="comment">//k的类型位flag的枚举类型</span></span><br><span class="line"><span class="keyword">let</span> k:flag = flag.sucess</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数</p>
<p>参数类型和返回值类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">arr:<span class="built_in">Array</span>&lt;int&gt;,str:<span class="built_in">string</span></span>):<span class="title">void</span></span>&#123;</span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可选参数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">str:<span class="built_in">string</span>,str1?:<span class="built_in">number</span></span>):<span class="title">void</span></span>&#123;<span class="comment">//函数调用时，第二个参数可选</span></span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>默认参数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">str:<span class="built_in">string</span>, str1:<span class="built_in">number</span> = <span class="number">1</span></span>):<span class="title">number</span></span>&#123;</span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">  <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>任意(数量)参数—-求和为例</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">...arr:<span class="built_in">number</span>[]</span>):<span class="title">number</span></span>&#123;</span><br><span class="line">  <span class="keyword">let</span> num:<span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line">  <span class="function"><span class="title">for</span>(<span class="params"><span class="keyword">let</span> i =<span class="number">1</span>; i &lt;arr.length; i++</span>)</span>&#123;</span><br><span class="line">    num =+ arr[i]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> num</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="TypeScript中函数重载"><a href="#TypeScript中函数重载" class="headerlink" title="TypeScript中函数重载"></a>TypeScript中函数重载</h4><ul>
<li><p>1,函数参数类型不同</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//情况一：参数类型不同</span></span><br><span class="line"><span class="comment">//两个重载对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">num:<span class="built_in">number</span>, str:<span class="built_in">string</span></span>):<span class="title">void</span> </span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">num:<span class="built_in">string</span>, str:<span class="built_in">string</span></span>):<span class="title">string</span> </span></span></span><br><span class="line"><span class="function"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">num:<span class="built_in">any</span>, str:<span class="built_in">any</span></span>):<span class="title">any</span> </span>&#123;</span></span></span><br><span class="line"><span class="function"><span class="function">  <span class="title">if</span>(<span class="params">num === <span class="string">&#x27;number&#x27;</span></span>) </span>&#123;</span></span><br><span class="line"><span class="function">    //第一个函数内容</span></span><br><span class="line"><span class="function">  &#125;<span class="title">else</span></span>&#123;</span><br><span class="line">    <span class="comment">//第二个函数的内容</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p>2,函数的参数的个数不同</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数重载</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//情况二：参数个数不同</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span> (<span class="params">num:<span class="built_in">number</span>, str:<span class="built_in">string</span></span>):<span class="title">void</span> </span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span> (<span class="params">num:<span class="built_in">string</span>, str?:<span class="built_in">string</span></span>):<span class="title">string</span> </span></span></span><br><span class="line"><span class="function"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span> (<span class="params">num:<span class="built_in">any</span>, str:<span class="built_in">any</span></span>):<span class="title">any</span> </span>&#123;</span></span></span><br><span class="line"><span class="function"><span class="function">  <span class="title">if</span>(<span class="params">str</span>)</span>&#123;</span></span><br><span class="line"><span class="function">    //第一个函数内容</span></span><br><span class="line"><span class="function">  &#125;<span class="title">else</span></span>&#123;</span><br><span class="line">    <span class="comment">//第二个函数内容</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="类"><a href="#类" class="headerlink" title="类"></a>类</h4><p>Public:公有，类内，类外，派生类等可访问</p>
<p>protected:保护，类内，派生类能访问，类外不能访问</p>
<p>Private:私有，类内能访问，类外，派生类不能访问</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 修饰符有 public protected  private</span></span><br><span class="line">  name:<span class="built_in">string</span> <span class="comment">//不写修饰符默认表示public</span></span><br><span class="line">	<span class="comment">//静态变量</span></span><br><span class="line">  <span class="keyword">static</span> age:<span class="built_in">number</span></span><br><span class="line">  <span class="comment">//构造函数</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//实例方法：通过实例对象调用的方法</span></span><br><span class="line">  fn():<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//静态方法:静态方法只能调用静态变量，不能调用其它类型变量</span></span><br><span class="line">  <span class="keyword">static</span> fn1():<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(Animal.age)<span class="comment">//通过类名调用</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> Animal(<span class="string">&#x27;狗&#x27;</span>)</span><br><span class="line"><span class="comment">//调用实例方法</span></span><br><span class="line">p.fn()  <span class="comment">//狗</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><p>类的继承</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="keyword">extends</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>(name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//子类重写父类的方法(子类实例调用的时候，先去子类中找，找不到去父类中去找)</span></span><br><span class="line">  <span class="function"><span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;子类的方法&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//子类自己的方法</span></span><br><span class="line">  <span class="function"><span class="title">fn2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h4><p>基类定义一个方法不实现，让子类去实现，不同的派生类有不同的实现方式</p>
<h4 id="抽象类abstract"><a href="#抽象类abstract" class="headerlink" title="抽象类abstract"></a>抽象类abstract</h4><p>提供其他类继承的模版，定义方法不实现，不能半日直接是实例话</p>
<p>抽象方法：定义在抽象类中，不实现具体方法，只提供定义。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line">  name:<span class="built_in">string</span></span><br><span class="line">  </span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//定义抽象函数；只定义不实现</span></span><br><span class="line">  <span class="keyword">abstract</span> fn():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Zhangsan</span> <span class="keyword">extends</span> <span class="title">Person</span></span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>(name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//子类必须实现</span></span><br><span class="line">  fn ()&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h4><p>用来描述和规范属性，函数，类，等等。</p>
<ul>
<li><p>定义接口与使用（属性接口）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义接口(必须写分号)----属性接口</span></span><br><span class="line">interface Fullname&#123;</span><br><span class="line">  firstName:string;</span><br><span class="line">  lastName:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//可选参数</span></span><br><span class="line">interface Fullname&#123;</span><br><span class="line">  firstName:string;</span><br><span class="line">  lastName？:string; <span class="comment">// 这个参数可传可不传</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printName</span>(<span class="params">name:Fullname</span>):<span class="title">void</span></span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(name.firstName,name.lastName)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//直接调用（参数必须完全满足接口）</span></span><br><span class="line">printName(&#123;</span><br><span class="line">  firstName:<span class="string">&#x27;zhang&#x27;</span>,</span><br><span class="line">  lastName:<span class="string">&#x27;xin&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  firstName:<span class="string">&#x27;zhang&#x27;</span>,</span><br><span class="line">  lastName:<span class="string">&#x27;xin&#x27;</span>,</span><br><span class="line">  age:<span class="number">12</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//外部对象调用，包含接口即可</span></span><br><span class="line">printName(obj)</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数接口</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数接口</span></span><br><span class="line">interface encrypt&#123;</span><br><span class="line">  <span class="comment">//参数                        返回值</span></span><br><span class="line">  (value1:string,<span class="attr">value2</span>:number):string;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//实现函数接口的方法一：</span></span><br><span class="line"><span class="keyword">let</span> fn:encrypt = <span class="function"><span class="keyword">function</span> (<span class="params">v1:string,v2:number</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> v1+v2</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="string">&#x27;xin&#x27;</span>,<span class="number">12</span>) </span><br><span class="line"><span class="comment">//实现函数接口的方式二：</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params">v1:string,v2:number</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> v1+v2</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> fn2:encrypt = fn1</span><br><span class="line">fn2(<span class="string">&#x27;xin&#x27;</span>,<span class="number">29</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>可索引接口（数组，对象）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可索引接口(数组)</span></span><br><span class="line">interface arr&#123;</span><br><span class="line">  <span class="comment">//索引        值</span></span><br><span class="line">  [index:number]:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> ar:arr = [<span class="string">&#x27;eq&#x27;</span>,<span class="string">&#x27;wq&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">//可索引接口(对象)</span></span><br><span class="line">interface obj&#123;</span><br><span class="line">  [index:string]:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> ob:obj = &#123;</span><br><span class="line">  name:<span class="string">&#x27;xin&#x27;</span>,</span><br><span class="line">  age:<span class="string">&#x27;12&#x27;</span></span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>
</li>
<li><p>类接口</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//类接口</span></span><br><span class="line">interface Animals&#123;</span><br><span class="line">  <span class="comment">//类中的属性</span></span><br><span class="line">  name:string;</span><br><span class="line">  <span class="comment">//类中的方法</span></span><br><span class="line">  eat(str:string):<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dogg</span> <span class="title">implements</span> <span class="title">Animals</span></span>&#123;</span><br><span class="line">  name:string</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  eat():<span class="keyword">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = <span class="keyword">new</span> Dogg(<span class="string">&#x27;小黑&#x27;</span>)</span><br><span class="line">d.eat()</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="泛型（函数，类后面加）"><a href="#泛型（函数，类后面加）" class="headerlink" title="泛型（函数，类后面加）"></a>泛型（函数，类后面加<T>）</h4><p>指的是不确定的数据类型，要求传入的参数和返回的参数类型一致</p>
<ul>
<li>函数的泛型（范型方法）</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//范型</span></span><br><span class="line">function fn3&lt;T&gt;(value:T):T&#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用的时候动态决定T是什么数据类型</span></span><br><span class="line">fn3&lt;string&gt;(<span class="string">&#x27;s&#x27;</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li><p>类的范型（范型类）</p>
<p>这个类既能处理number类型，也能处理string类型的数值</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//类的范型</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Personn</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">  list:T[] = []</span><br><span class="line">  addd(value:T):<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.list.push(value)</span><br><span class="line">  &#125;</span><br><span class="line">  print():<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.list)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//指定模版类型为string</span></span><br><span class="line"><span class="keyword">let</span> p1 = <span class="keyword">new</span> Personn&lt;<span class="built_in">string</span>&gt;()</span><br><span class="line">p1.addd(<span class="string">&#x27;xin&#x27;</span>)</span><br><span class="line">p1.addd(<span class="string">&#x27;zhang&#x27;</span>)</span><br><span class="line">p1.print()<span class="comment">// 打印数组</span></span><br><span class="line"><span class="comment">//指定模版类型为number</span></span><br><span class="line"><span class="keyword">let</span> p2 = <span class="keyword">new</span> Personn&lt;<span class="built_in">number</span>&gt;()</span><br><span class="line">p2.addd(<span class="number">1</span>)</span><br><span class="line">p2.addd(<span class="number">1</span>)</span><br><span class="line">p2.addd(<span class="number">1</span>)</span><br><span class="line">p2.print()<span class="comment">//打印数组</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>接口的范型（范型接口）</p>
<p>写法一：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//范型接口</span></span><br><span class="line"><span class="keyword">interface</span> fnnnn&#123;</span><br><span class="line">  &lt;T&gt;(value:T):T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a:fnnnn = <span class="function"><span class="keyword">function</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//动态确定类型呢</span></span><br><span class="line">a&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;a&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>写法二：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">interface fnnnnnn&lt;T&gt;&#123;</span><br><span class="line">  (value:T):T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">b</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> c:fnnnnnn&lt;string&gt; = b</span><br><span class="line">c(<span class="string">&#x27;xinnn&#x27;</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>把类作为参数来限制传入的数据类型</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//把类作为参数来限制数据传输的类型</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span></span>&#123;</span><br><span class="line">  username:string|<span class="literal">undefined</span></span><br><span class="line">  password:string|<span class="literal">undefined</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">username,password</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.username = username</span><br><span class="line">    <span class="built_in">this</span>.password = password</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Mydb</span></span>&#123;</span><br><span class="line">  <span class="comment">//传入的user 必须满足User里面的规范</span></span><br><span class="line">  add(user:User):<span class="keyword">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(user)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> zhangsan =  <span class="keyword">new</span> User(<span class="string">&#x27;zhangsan&#x27;</span>,<span class="string">&#x27;123456&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> db = <span class="keyword">new</span> Mydb()</span><br><span class="line">db.add(zhangsan)</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="命名空间"><a href="#命名空间" class="headerlink" title="命名空间"></a>命名空间</h4><p>防止不同人协作的时候，有相同的民命</p>
<ul>
<li>同一个文件，不同命名空间</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//命名空间A</span></span><br><span class="line"><span class="keyword">namespace</span> A&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//命名空间B</span></span><br><span class="line"><span class="keyword">namespace</span> B&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎22222&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> d1 = <span class="keyword">new</span> A.Dogs(<span class="string">&#x27;狗&#x27;</span>)  <span class="comment">// 调用A命名空间的类</span></span><br><span class="line"><span class="keyword">let</span> d2 = <span class="keyword">new</span> B.Dogs(<span class="string">&#x27;傻狗&#x27;</span>) <span class="comment">// 调用B命名空间的类</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><p>不同文件命名空间的调用</p>
<p>文件1</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//命名空间</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> A&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">namespace</span> B&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎22222&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>文件二：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;A&#125; <span class="keyword">from</span> <span class="string">&#x27;文件1路径&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = <span class="keyword">new</span> A.dogs(<span class="string">&#x27;狗&#x27;</span>);</span><br><span class="line">d.eat();</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="装饰器"><a href="#装饰器" class="headerlink" title="装饰器"></a>装饰器</h4><p>装饰器是一种特殊类型的声名，他能附加到声名，方法，属性，参数上，可以修改类的行为。</p>
<p>可以扩充类，属性，参数，方法的功能。</p>
<p>常见的装饰器分类：</p>
<p>​    类装饰器</p>
<p>​    属性装饰器</p>
<p>​    方法装饰器</p>
<p>​    参数装饰器</p>
<p>装饰器写法：1，普通装饰器（无法传参）</p>
<p>​                       2，工厂装饰器（可以传递参数）</p>
<ul>
<li><p>类的普通装饰器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//普通的类装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn22</span>(<span class="params">params:any</span>)</span>&#123; <span class="comment">// params 代表的就是这个类</span></span><br><span class="line">  <span class="built_in">console</span>.log(params)</span><br><span class="line">  <span class="comment">//给类扩充属性</span></span><br><span class="line">  params.prototype.name = <span class="string">&#x27;xxx&#x27;</span></span><br><span class="line">  <span class="comment">//给类扩充方法</span></span><br><span class="line">  params.prototype.getDate = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">@fn22</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Car</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>类的工厂装饰器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//工厂装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fnaa</span>(<span class="params">params:string</span>)</span>&#123; <span class="comment">// params 代表的就是这个类</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">target:any</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(params);   <span class="comment">// 参数</span></span><br><span class="line">      <span class="built_in">console</span>.log(target);  <span class="comment">// 目标类</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">@fnaa(<span class="string">&#x27;我是传递的参数&#x27;</span>)</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Car</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="keyword">new</span> Car();</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>修改数据</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fnaaa</span>(<span class="params">target:any</span>)</span>&#123; </span><br><span class="line">    <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">target</span></span>&#123;</span><br><span class="line">        name:any = <span class="string">&#x27;修改后的数据&#x27;</span>;</span><br><span class="line">        <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line">@fnaaa</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Car</span> </span>&#123;</span><br><span class="line">  name:string|<span class="literal">undefined</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = <span class="string">&#x27;aaaa&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="keyword">new</span> Car();</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li>属性装饰器</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fff</span>(<span class="params">params:string</span>)</span>&#123;  <span class="comment">//装饰器传的参数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">target:any,attr:any</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(attr) <span class="comment">// 被修饰的属性</span></span><br><span class="line">    <span class="built_in">console</span>.log(target)  <span class="comment">//属性所在的类</span></span><br><span class="line">    <span class="comment">//把装饰器的参数赋值给类的被修饰的属性name</span></span><br><span class="line">    target.attr = params</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cars</span> </span>&#123;</span><br><span class="line">  @fff(<span class="string">&#x27;xxxxxxxx&#x27;</span>)</span><br><span class="line">  name:string|<span class="literal">undefined</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = <span class="string">&#x27;aaaa&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>方法装饰器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法装饰器</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ttt</span>(<span class="params">params:any</span>)</span>&#123;<span class="comment">//装饰器传递的参数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,methodsName:any,desc:any</span>)</span>&#123;<span class="comment">//参数一target：修饰方法的类，参数二：methodsName：被修饰的</span></span><br><span class="line">                    <span class="comment">//名字，参数三：desc:当前方法的描述</span></span><br><span class="line">    <span class="comment">//修改当前被装饰的方法</span></span><br><span class="line">    <span class="keyword">let</span> oMethod = desc.value;<span class="comment">//保存之前的方法</span></span><br><span class="line">    desc.value = <span class="function"><span class="keyword">function</span> (<span class="params">...args:any</span>) </span>&#123;</span><br><span class="line">        args.map(<span class="function">(<span class="params">v</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="built_in">String</span>(v);</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">//添加</span></span><br><span class="line">        oMethod.apply(<span class="built_in">this</span>,args)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">AAAA</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  @ttt(<span class="string">&#x27;xxxxxx&#x27;</span>)</span><br><span class="line">  <span class="function"><span class="title">getName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/10/26/typeScript/" data-id="ckhmnwytz00046rx41oq5amfj" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/my_blog/2020/11/03/browser/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          浏览器发展史与现状
        
      </div>
    </a>
  
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/11/">November 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/10/">October 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/my_blog/2020/11/18/zhengze/">JS中的正则表达式</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/react/">React基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/vue/">Vue基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/async/">JS异步编程的三种方案</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/computer/">计算机网路笔记</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jone-xin<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/my_blog/" class="mobile-nav-link">主页</a>
  
    <a href="/my_blog/archives" class="mobile-nav-link">归档</a>
  
    <a target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling" class="mobile-nav-link">@我的gitee</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/my_blog/fancybox/jquery.fancybox.css">

  
<script src="/my_blog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/my_blog/js/script.js"></script>




  </div>
</body>
</html>